<template>
    <div class="card" style="margin-top: 10px;">
        <h2 style="margin-bottom: 20px;">评论 {{ commentCount}}</h2>

        <div style="margin-bottom: 20px;">
            <el-input type="textarea" placeholder="请输入评论内容" v-model="commentContent"></el-input>
            <div style="text-align: right; margin-top: 5px;">
                <el-button type="primary" @click="addComment">发 送</el-button>
            </div>
        </div>  

        <div>
            <div style="display: flex; gap: 20px; margin-bottom: 20px;" v-for="item in commentList" :key="item.id">
                <img src="../../assets/images/luoqixi.jpg" style="width: 50px; height: 50px; border-radius: 50%;">

                <div style="flex: 1;">
                    <!-- 评论 -->
                    <div style="margin-bottom: 10px;">
                        <div style="color: #666; margin-bottom: 10px; font-size: 15px;">{{ item.userName }}</div>
                        <div style="color: #444; margin-bottom: 10px;">{{ item.content }}</div>
                        <div style="color: #888; font-size: 13px; margin-bottom: 10px;"><span style="margin-right: 20px;">{{ item.time }}</span>
                            <span style="cursor: pointer;"><i class="el-icon-s-comment"></i>评论</span>
                        </div>
                        <div v-if="item.showReplyInput">
                            <el-input type="textarea" placeholder="请输入回复内容" v-model="item.replyContent"></el-input>
                            <div style="text-align: right; margin-top: 5px">
                                <el-button type="primary" @click="addReplay(item)">回 复</el-button>
                            </div>  
                        </div>
                        <!-- 回复 -->
                        <div style="display: flex; gap: 20px; margin: 20px 0;" v-for="sub in item.children" :key="sub.id">
                            <img src="../../assets/images/luoqixi.jpg" style="width: 50px; height: 50px; border-radius: 50%;">
                            <div style="flex: 1;">
                                <div style="color: #666; margin-bottom: 10px; font-size: 15px;">{{ sub.userName }} <span style="color: #333" v-if="sub.replyUser !== item.userName">回复  {{ sub.replyUser }}</span></div>
                                <div style="color: #444; margin-bottom: 10px;">{{ sub.content }}</div>
                                <div style="color: #888; font-size: 13px;"><span style="margin-right: 20px;">{{ sub.time }}</span>
                                    <span style="cursor: pointer;"><i class="el-icon-s-comment"></i>评论</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name:'Comment',
    data(){
        return{
            commentCount: 0,
            commentContent: '',
            commentList: [],
        }
    },
    methods:{
        addComment:{
            
        },
        addReply:{

        }
    }
}
</script>